<template>
  <view class="action-sheet-example">
    <view class="example-title">操作菜单组件示例</view>
    
    <!-- 基础用法 -->
    <view class="example-section">
      <view class="section-title">基础用法</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showBasic">显示基础菜单</comp-button>
      </view>
      <comp-action-sheet
        v-model="basicVisible"
        :items="basicItems"
        @select="handleSelect"
        @cancel="handleCancel"
      />
    </view>
    
    <!-- 带标题 -->
    <view class="example-section">
      <view class="section-title">带标题的菜单</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showWithTitle">显示带标题菜单</comp-button>
      </view>
      <comp-action-sheet
        v-model="titleVisible"
        title="请选择操作"
        :items="basicItems"
        @select="handleSelect"
        @cancel="handleCancel"
      />
    </view>
    
    <!-- 带图标 -->
    <view class="example-section">
      <view class="section-title">带图标的菜单</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showWithIcons">显示带图标菜单</comp-button>
      </view>
      <comp-action-sheet
        v-model="iconVisible"
        title="请选择操作"
        :items="iconItems"
        @select="handleSelect"
        @cancel="handleCancel"
      />
    </view>
    
    <!-- 不同类型的菜单项 -->
    <view class="example-section">
      <view class="section-title">不同类型的菜单项</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showWithTypes">显示不同类型菜单</comp-button>
      </view>
      <comp-action-sheet
        v-model="typeVisible"
        title="请选择操作"
        :items="typeItems"
        @select="handleSelect"
        @cancel="handleCancel"
      />
    </view>
    
    <!-- 禁用菜单项 -->
    <view class="example-section">
      <view class="section-title">禁用菜单项</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showWithDisabled">显示带禁用项菜单</comp-button>
      </view>
      <comp-action-sheet
        v-model="disabledVisible"
        title="请选择操作"
        :items="disabledItems"
        @select="handleSelect"
        @cancel="handleCancel"
      />
    </view>
    
    <!-- 自定义样式 -->
    <view class="example-section">
      <view class="section-title">自定义样式</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showWithCustomStyle">显示自定义样式菜单</comp-button>
      </view>
      <comp-action-sheet
        v-model="styleVisible"
        title="请选择操作"
        :items="styleItems"
        @select="handleSelect"
        @cancel="handleCancel"
      />
    </view>
    
    <!-- 自定义内容 -->
    <view class="example-section">
      <view class="section-title">自定义内容</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showWithCustomContent">显示自定义内容菜单</comp-button>
      </view>
      <comp-action-sheet
        v-model="customVisible"
        title="分享到"
        @cancel="handleCancel"
      >
        <view class="custom-content">
          <view class="share-grid">
            <view 
              v-for="(item, index) in shareItems" 
              :key="index"
              class="share-item"
              @click="handleShareSelect(item)"
            >
              <view class="share-icon">{{ item.icon }}</view>
              <view class="share-text">{{ item.text }}</view>
            </view>
          </view>
        </view>
      </comp-action-sheet>
    </view>
    
    <!-- 方法调用 -->
    <view class="example-section">
      <view class="section-title">方法调用</view>
      <view class="button-row">
        <comp-button theme="primary" @click="showByMethod">通过方法显示</comp-button>
      </view>
      <comp-action-sheet
        ref="methodActionSheet"
        title="方法调用示例"
        :items="basicItems"
        @select="handleSelect"
        @cancel="handleCancel"
      />
    </view>
    
    <!-- 事件日志 -->
    <view class="example-section">
      <view class="section-title">事件日志</view>
      <view class="event-log">
        <view>事件日志：</view>
        <view v-for="(log, index) in eventLogs" :key="index" class="log-item">
          {{ log }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CompButton from '../comp-button/Index.vue'
import CompActionSheet, { ActionSheetItem } from './Index.vue'

// 基础菜单项
const basicItems = ref<ActionSheetItem[]>([
  { text: '选项一' },
  { text: '选项二' },
  { text: '选项三' }
])

// 带图标的菜单项
const iconItems = ref<ActionSheetItem[]>([
  { text: '拍照', icon: '📷' },
  { text: '从相册选择', icon: '🖼️' },
  { text: '保存图片', icon: '💾' }
])

// 不同类型的菜单项
const typeItems = ref<ActionSheetItem[]>([
  { text: '普通选项', type: 'default' },
  { text: '主要选项', type: 'primary' },
  { text: '成功选项', type: 'success' },
  { text: '警告选项', type: 'warning' },
  { text: '危险选项', type: 'danger' }
])

// 禁用的菜单项
const disabledItems = ref<ActionSheetItem[]>([
  { text: '可用选项' },
  { text: '禁用选项', disabled: true },
  { text: '另一个可用选项' }
])

// 自定义样式的菜单项
const styleItems = ref<ActionSheetItem[]>([
  { 
    text: '自定义字体大小', 
    style: { fontSize: '20px', fontWeight: 'bold' } 
  },
  { 
    text: '自定义颜色', 
    style: { color: '#8e44ad', backgroundColor: '#f0f0f0' } 
  },
  { 
    text: '自定义边框', 
    style: { border: '1px dashed #3498db', borderRadius: '8px', margin: '5px' } 
  }
])

// 分享菜单项
const shareItems = ref<ActionSheetItem[]>([
  { text: '微信', icon: '💬' },
  { text: '朋友圈', icon: '👥' },
  { text: '微博', icon: '🔄' },
  { text: 'QQ', icon: '🐧' },
  { text: '复制链接', icon: '🔗' },
  { text: '更多', icon: '⋯' }
])

// 控制各个菜单的显示状态
const basicVisible = ref(false)
const titleVisible = ref(false)
const iconVisible = ref(false)
const typeVisible = ref(false)
const disabledVisible = ref(false)
const styleVisible = ref(false)
const customVisible = ref(false)

// 方法调用示例
const methodActionSheet = ref<InstanceType<typeof CompActionSheet> | null>(null)
const showByMethod = () => {
  methodActionSheet.value?.open()
}

// 显示各种菜单
const showBasic = () => {
  basicVisible.value = true
}

const showWithTitle = () => {
  titleVisible.value = true
}

const showWithIcons = () => {
  iconVisible.value = true
}

const showWithTypes = () => {
  typeVisible.value = true
}

const showWithDisabled = () => {
  disabledVisible.value = true
}

const showWithCustomStyle = () => {
  styleVisible.value = true
}

const showWithCustomContent = () => {
  customVisible.value = true
}

// 事件日志
const eventLogs = ref<string[]>([])

// 处理选择事件
const handleSelect = (item: ActionSheetItem, index: number) => {
  const log = `选择了: ${item.text}, 索引: ${index}, 时间: ${new Date().toLocaleTimeString()}`
  eventLogs.value.unshift(log)
  if (eventLogs.value.length > 5) {
    eventLogs.value.pop()
  }
}

// 处理分享选择
const handleShareSelect = (item: ActionSheetItem) => {
  const log = `分享到: ${item.text}, 时间: ${new Date().toLocaleTimeString()}`
  eventLogs.value.unshift(log)
  if (eventLogs.value.length > 5) {
    eventLogs.value.pop()
  }
  customVisible.value = false
}

// 处理取消事件
const handleCancel = () => {
  const log = `取消操作, 时间: ${new Date().toLocaleTimeString()}`
  eventLogs.value.unshift(log)
  if (eventLogs.value.length > 5) {
    eventLogs.value.pop()
  }
}
</script>

<style scoped>
.action-sheet-example {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.example-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.example-section {
  margin-bottom: 30px;
  padding: 20px;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.section-title {
  font-size: 18px;
  margin-bottom: 15px;
  color: #555;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.event-log {
  margin-top: 15px;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 14px;
}

.log-item {
  padding: 5px 0;
  border-bottom: 1px dashed #ddd;
}

/* 自定义内容样式 */
.custom-content {
  padding: 20px;
}

.share-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 10px 0;
}

.share-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.share-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 8px;
}

.share-text {
  font-size: 12px;
  color: #666;
}

.share-item:active .share-icon {
  background-color: #e0e0e0;
}
</style>